<template>
  <div>
    <div ref="runTimeChart" style="width: 600px;height:400px;"></div>
    <div ref="memoryChart" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const runTimeChartRef = ref(null);
    const memoryChartRef = ref(null);
    const runTimeData = ref([]);
    const memoryData = ref([]);

    // Fetch data and update runTimeData and memoryData
    fetch('your-api-url')
        .then(response => response.json())
        .then(data => {
          runTimeData.value = data.data.map(item => item.runTime);
          memoryData.value = data.data.map(item => item.memory);
        });

    onMounted(() => {
      const runTimeChart = echarts.init(runTimeChartRef.value);
      const memoryChart = echarts.init(memoryChartRef.value);

      const option = {
        xAxis: {
          type: 'category',
          data: data.data.map((item, index) => `Data ${index + 1}`)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'bar'
        }]
      };

      runTimeChart.setOption({ ...option, series: [{ data: runTimeData.value, type: 'bar' }] });
      memoryChart.setOption({ ...option, series: [{ data: memoryData.value, type: 'bar' }] });
    });

    return {
      runTimeChartRef,
      memoryChartRef
    };
  }
};
</script>